<template>
	<!-- 组件结构 -->
	<div class="student">
		<h2 >学生名称:{{name}}</h2>
		<h2>学生性别:{{sex}}</h2>
		<button type="button" @click="setStudentName">学生名传给School组件</button>
	</div>
</template>

<script>
	// 组件交互相关的代码(数据、方法等)
	// 创建student组件
	export default {
		name:'Student',
		// data 要写成函数式
		data(){
			return{
				name:'老王',
				sex:'男',
			};
		},
		mounted() {
			// console.info('Student',this.x);
		},
		methods:{
			setStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		}
	};
</script>

<style scoped>
	/* scoped样式 是为了让样式在局部生效，防止冲突 */
	/* 组件的样式 */
	.student{
		background-color: #00557f;
		color: #FF5500;
		padding: 5px;
		margin-top: 10px;
	}
</style>

